<template>
  <div class="page-container-padding">
    <el-table border stripe :data="varietyList">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="名称" width="100" />
      <el-table-column prop="code" label="代码" width="80" />
      <el-table-column prop="price_unit" label="报价单位" width="110" />
      <el-table-column label="组别" width="110" align="center">
        <template #default="scope">
          <el-tag size="mini">
            {{ scope.row.group_name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="适用空间">
        <template #default="scope">
          <el-tag
            v-for="(s, index) in scope.row.scopes"
            :key="index"
            size="mini"
            disable
            :type="s.tag"
          >
            {{ s.name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="公开" width="110" align="center">
        <template #default="scope">
          <el-tag
            size="mini"
            :type="scope.row.is_active ? 'success' : 'danger'"
          >
            {{ scope.row.is_active ? '公开' : '隐蔽' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="60" align="center">
        <template #default="scope">
          <el-button type="text" @click="toUpdateVariety(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="sort_num" label="排序" width="50" />
    </el-table>
    <el-dialog :visible.sync="currentRow.showEdit" title="品种信息修改">
      <el-form label-width="80px" size="mini">
        <el-form-item label="名称">
          <el-input v-model="currentRow.name" placeholder="品种名称"></el-input>
        </el-form-item>
        <el-form-item label="代码">
          <el-input
            v-model="currentRow.code"
            disabled
            placeholder="品种在系统中的唯一性代码，优先使用交易代码"
          ></el-input>
        </el-form-item>
        <el-form-item label="报价单位">
          <el-input
            v-model="currentRow.price_unit"
            placeholder="品种的报价单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属组别">
          <el-select
            v-model="currentRow.group_id"
            placeholder="品种所属的分组"
            style="width: 100%"
          >
            <el-option :value="1" label="宏观金融" />
            <el-option :value="2" label="能源化工" />
            <el-option :value="3" label="有色金属" />
            <el-option :value="4" label="黑色系" />
            <el-option :value="5" label="农产品" />
          </el-select>
        </el-form-item>
        <el-form-item label="适用范围">
          <el-select
            v-model="currentRow.scopes"
            multiple
            placeholder="选择品种适用的范围"
            style="width: 100%"
          >
            <el-option
              v-for="s in scopeList"
              :key="s.key"
              :value="s.key"
              :label="s.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="顺序">
          <el-input v-model="currentRow.sort_num"></el-input>
        </el-form-item>
        <el-form-item label="交易所">
          <el-switch
            v-model="currentRow.is_exchange"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item label="公开">
          <el-switch
            v-model="currentRow.is_active"
            active-text="公开"
            inactive-text="隐蔽"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="currentRow.showEdit = false">取消</el-button>
        <el-button
          type="primary"
          :loading="currentRow.saveLoading"
          @click="toSaveUpdateRow"
        >
          确定保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    RetrieveVariety,
    UpdateVariety,
    RetrieveVarietyScopes,
  } from '@/api/adminRuizhi/common'
  export default {
    data() {
      return {
        scopeList: [],
        varietyList: [],
        currentRow: {
          row_id: null,
          showEdit: false,
          saveLoading: false,
          name: '',
          code: '',
          price_unit: '',
          group_id: null,
          scopes: [],
          sort_num: null,
          is_exchange: null,
          is_active: false,
        },
      }
    },
    mounted() {
      RetrieveVarietyScopes().then((res) => {
        this.scopeList = res.data
      })
      this.getVariety()
    },
    methods: {
      getVariety() {
        RetrieveVariety().then((res) => {
          const resData = res.data
          this.varietyList = resData.data.map((item) => {
            let scopes = []
            for (let i = 0; i < this.scopeList.length; i++) {
              let _obj = { name: this.scopeList[i].name, tag: 'info' }
              for (let j = 0; j < item.scope_names.length; j++) {
                if (item.scope_names[j] === this.scopeList[i].name) {
                  _obj.tag = 'success'
                  break
                }
              }
              scopes.push(_obj)
            }
            item.scopes = scopes
            return item
          })
        })
      },

      toUpdateVariety(row) {
        this.currentRow.row_id = row.id
        this.currentRow.name = row.name
        this.currentRow.code = row.code
        this.currentRow.price_unit = row.price_unit
        this.currentRow.group_id = row.group_id
        this.currentRow.scopes = row.scope.split(',')
        this.currentRow.sort_num = row.sort_num
        this.currentRow.is_exchange = row.is_exchange
        this.currentRow.showEdit = true
      },

      toSaveUpdateRow() {
        const bodyData = { ...this.currentRow }
        bodyData.is_exchange = this.currentRow.is_exchange ? 1 : 0
        bodyData.vid = this.currentRow.row_id
        bodyData.scope = this.currentRow.scopes.join(',')
        this.currentRow.saveLoading = true
        UpdateVariety(bodyData).then((res) => {
          this.$baseMessage(res.message, 'success')
          this.currentRow.showEdit = false
          this.currentRow.saveLoading = false
          this.getVariety()
        })
      },
    },
  }
</script>
<style scoped lang="scss"></style>
